import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Select, Tree, TreeSelect, DatePicker, Checkbox, Tabs, InputNumber } from 'antd'
import _ from 'lodash'
import moment from 'moment'

import Ajax from 'lib/Ajax'
import { addConfig } from 'actions/config'

const Option = Select.Option;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

// 新建编辑
class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
     
    }
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      this.props.form.resetFields();
    }
  }

  handleCommit = () => {
    var self = this;
    self.props.form.validateFields((err, values) => {
      if(err == null){
        self.setState({
          loading: true
        });
        const { type, rowdata  } = self.props;
        if(self.props.type == 'edit'){
          values.citizenBankId = rowdata.citizenBankId;
        }
        self.props.onOk(self.props.type, values);
      }
    });
  }

  onCancel = ()=>{
    this.setState({
      loading: false
    });
    this.props.onCancel();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const { visible, type, rowdata } = this.props;
    const { bankCode } = this.props.config;
    console.log(this.props);
    return (<Modal 
              title={ type == 'edit'?"修改银行卡":"新建银行卡" }
              visible={visible}
              onOk={ this.handleCommit } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
            >
              <Form
                horizontal
              >
                <Row gutter={20}>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="所属银行">
                      {getFieldDecorator("bankCode",{
                        initialValue: type == 'edit'?rowdata.bankCode:"",
                        rules: [{
                          required: true, message: '请选择所属银行',
                        }]
                      })(
                        <Select>
                          {
                            (bankCode||[]).map(function(obj){
                              return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                            })
                          }
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="银行卡号">
                      {getFieldDecorator("bankNumber",{
                        initialValue: type == 'edit'?rowdata.bankNumber:"",
                        rules: [{
                          required: true, message: '请输入银行号码',
                        }]
                      })(
                        <Input />
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Modal>);
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addConfig }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(Edit))